import React, { useEffect, useState } from 'react'
import './index.scss'
import { SideBar } from 'antd-mobile';
import { connect } from 'react-redux';
import { getCategoryListAction } from '../../store/actions/rydata'

const Category = (props) => {
    const [activeKey, setKey] = useState(0)
    const url = 'https://hshop.honorfile.com/pimages/cnqx'
    const [categorylist, setCategorylist] = useState([])
    const { navtitlelist, getCategoryListAction } = props
    useEffect(() => {
        getCategoryListAction()
    }, [getCategoryListAction])
    const setActiveKey = (key) => {
        setKey(key)
        setCategorylist(navtitlelist[key].subCategorys)
    }
    return (
        <div>
            <div className='word'>
                <div className='cast'>
                    <span className='iconfont icon-sousuoxiao'></span>
                    <span>儿童手表</span><span className='iconfont icon-huo'></span></div></div>
            <div className='nav'>
                <div className='side'>
                    <SideBar activeKey={activeKey} onChange={setActiveKey}>
                        {navtitlelist.map((item, index) => (
                            <SideBar.Item key={index} title={item.name} className='title' />
                        ))}
                    </SideBar>
                </div>

                <div className='cate_right'>
                    <div className='content1'>
                        <div className='category1'>
                            {
                                categorylist.map((item, index) => <div key={index}>
                                    <div className='categoryItem'>
                                        <div className='imageitem'><img src={url + item.subCategorys[0].photoPath + item.subCategorys[0].photoName} alt="" /></div>
                                        <div className='item'>{item.name}</div>
                                    </div>
                                </div>)
                            }

                        </div>
                        <div className="item-pro">
                            {activeKey !== '0' && categorylist.filter((item) => !item.name.includes('全部')).map((item, index) => <div className='category2' key={index}>
                                <div className='con_name'>{item.name}</div>
                                {item.subCategorys.map((i, ind) => <div className='content2' key={ind}>
                                    <div className='image1'>
                                        <div className='image2'><img src={url + i.photoPath + i.photoName} alt="" /></div>
                                        <div className='item'>{i.name}</div></div>
                                </div>)}
                            </div>)}
                        </div>
                    </div>
                </div>
            </div>
        </div >
    )

}
/*class Category extends Component {
    constructor() {
        super()
        this.state = {
            activeKey: "0",
            categorylist: []

        }
    }
    setActiveKey = (key) => {
        console.log('点击导航', key);
        this.setState({
            categorylist: this.props.navtitlelist[key].subCategorys,
            activeKey: key
        })
    }
    componentDidMount() {
        this.props.getCategoryListAction()
    }
    render() {
        const url = 'https://hshop.honorfile.com/pimages/cnqx'
        const { categorylist, activeKey } = this.state
        const { navtitlelist } = this.props
        

    }



}*/

export default connect(state => ({
    navtitlelist: state.rydata.navtitlelist || [],
    // categorylist: state.rydata.categorylist || [] 
}), { getCategoryListAction })(Category)